<template>
	<view class="main">
		<view class="content1">
			<view class="item">
				<text class="itemText">费用类型</text>
				<text>体检费</text>
			</view>
			<view class="item">
				<text class="itemText">就诊人</text>
				<text>{{listData[0].patients_name}}</text>
			</view>
			<view class="item item2">
				<text class="itemText">就诊卡号</text>
				<text>{{listData[0].card_number}}</text>
			</view>
		</view>
		<view class="content1">
			<view class="itemText2">费用明细</view>
			<view class="section">
				<view>
					<view>{{arrData.packageName}}</view>
					<view class="sectionItem">
						<text>单价：￥<text>{{arrData.packagePrice}}</text></text>
						<text class="num">数量：<text>1</text></text>
					</view>
				</view>
				<view>￥<text>{{arrData.packagePrice}}</text></view>
			</view>
		</view>
		<view class="content1">
			<view class="item">
				<text class="itemText">支付方式</text>
				<text>余额</text>
			</view>
			<view class="item">
				<text class="itemText">卡内余额</text>
				<text>2000.00<text>元</text></text>
				<navigator class="a1" url="#">去充值<text class="tag"> &gt; </text></navigator>
			</view>
		</view>
		<view class="content2">
			<text class="content2Text">预约前请仔细阅读</text>
			<navigator class="a2" url='/pages/home/bodyExamine/examinationInstructions/examinationInstructions'> 体检须知 </navigator>
		</view>
		<view class="content3">
			<button class="btn">合计：<text class="btnText">{{arrData.packagePrice}}</text></button>
			<button class="btn btn2" @click="tiaoZhuan">确认支付</button>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive,
		getCurrentInstance
	} from 'vue'
	export default {
		setup() {
			const data=reactive({
				listData:[],
				arrData:{}
			})
			
			data.listData=uni.getStorageSync('listData');
			// console.log(data.listData);
			data.arrData=uni.getStorageSync('arrData');
			console.log(data.arrData);
			const tiaoZhuan=()=>{
				uni.navigateTo({
					url: '/pages/home/bodyExamine/appointmentSucceeded/appointmentSucceeded'
				});
			}
			return {...toRefs(data),tiaoZhuan}
		}
		
	}
</script>

<style>
	.main{
		padding: 30rpx;
		box-sizing: border-box;
	}
.content1{
	border: 1px solid rgba(0, 0, 0, 0.2);
	box-shadow:  1px 2px 2px 1px rgba(0, 0, 0, 0.2);
	padding: 0 20rpx;
	box-sizing: border-box;
	margin-bottom: 30rpx;
}	
.item{
	border-bottom: 1px solid rgba(0, 0, 0, 0.2);
	padding-bottom: 30rpx;
	padding-top: 30rpx;
	box-sizing: border-box;
}
.itemText{
	color: rgba(0, 0, 0, 0.5);
	padding-right: 30rpx;
	box-sizing: border-box;
}
.item2{
	border: none;
}
.itemText2{
	color: rgba(0, 0, 0, 0.5);
	padding: 30rpx 0;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(0, 0,0,0.2);
}
.section{
	padding: 30rpx 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sectionItem{
	color: rgba(0, 0, 0, 0.5);
	padding-top: 20rpx;
	box-sizing: border-box;
}
.num{
	padding-left: 30rpx;
	box-sizing: border-box;
}
.a1{
	display: block;
	float: right;
	text-decoration: none;
	color:#2E88FF ;
}
.tag{
	color: rgba(0, 0, 0, 0.5);
}
.content2{
	color: rgba(0, 0, 0, 0.4);
}
.content2Text{
	float: left;
}
.a2{
	color:#2E88FF ;
	float: left;
	padding-left: 10rpx;
	box-sizing: border-box;
}
.content3{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
.btn{
	float: left;
	width: 50%;
}
.btnText{
	color: coral;
}
.btn2{
	background-color: #2E88FF;
	color: white;
}
</style>
